import React from 'react'
import { View } from '@tarojs/components'
import './CommentListPlaceholder.scss'

const RenderCard = () => (
  <View className="comment-card-placeholder">
    <View className="name-container row-half skeleton-blink" />
    <View className="text-container">
      <View className="row skeleton-blink" />
      <View className="row skeleton-blink" />
      <View className="row row-half skeleton-blink" />
    </View>
    <View className="row row-half skeleton-blink" />
  </View>
)

const CommentListPlaceholder = ({ count }) => (
  <View className="comment-list-placeholder">
    {[...Array(count)].map((item, index) => <RenderCard key={`${index}`} />)}
  </View>
)

export default CommentListPlaceholder
